<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JsNative</title>
<script type="text/javascript" src="JsNative.js"></script>
<script type="text/javascript">
function load(){
	JsNative.load();
	document.getElementById("down").onclick = function(e){
		(function(){
		var url = document.getElementById("url").value;
		var path = document.getElementById("path").value;
		
		var dl=JsNative.net.http.download(url, path);
		var tr = createList();
		var progressBar = tr.children[0].children[0];
		var state = 1;
		var bytesRead;
		var startTime = new Date().getTime();
		tr.children[1].children[0].onclick = function(){
			if(state == 1){
				//当前正在下载
				state = 2;
				this.setAttribute('disabled','disabled');
				dl.pause();
				tr.children[1].children[0].value = '继续';
				tr.children[1].children[0].removeAttribute('disabled');
				}
			else if(state == 2){
				//当前已暂停
				state = 1;
				bytesRead = dl.getProgress();
				startTime = new Date().getTime();
				dl.resume();
				this.value = '暂停';
			}
			else if(state == 3){
				//当前下载失败
			}
			else{
				//当前下载成功
				if(JsNative.system.os() == "Windows"){
					JsNative.system.exec("explorer.exe /select," + path);
				}
				else{
					alert('对不起，暂不支持您的操作系统');
				}
			}
		};
		//console.log(dl.getFileLength());
		opt = {};
		opt.onSuccess = function(){
		progressBar.children[0].style.width = "100%";
		tr.children[1].children[0].value = '在文件夹中显示';
		state = 0;
		};
		opt.onProgress = function(progress){
			progressBar.children[0].style.width = progress/dl.getFileLength()*progressBar.getBoundingClientRect().width+"px";
			var seconds = parseInt((new Date().getTime() - startTime)/1000);
			if(seconds == 0){
				seconds = 1;
			}
			var bytePerSecond = (dl.getProgress()-bytesRead)/seconds;
			var str = humanFileSize(bytePerSecond,true);
			progressBar.children[0].innerText = str + '/s';
			
		};
		opt.onFailed = function(){
			//有可能某个连接中断，继续下载即可
			dl.resume();
		};
		//opt.connectionCount = 4;
		dl.start(opt);
		bytesRead = dl.getProgress();
		})();
	};
}
function humanFileSize(bytes, si) {
	var thresh = si ? 1000 : 1024;
	if (bytes < thresh)
		return bytes + ' B';
	var units = si ? [ 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB' ] : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB' ];
	var u = -1;
	do {
		bytes /= thresh;
		++u;
	} while (bytes >= thresh);
	return bytes.toFixed(2) + ' ' + units[u];
};
	
function createList(){
	var tab = document.getElementById("downlist").children[1];
	var tr = document.createElement("tr");
	tr.innerHTML = '<td><div style="width: 100%;height: 40px;background-color: #D8B0B0;"><div class="bar" style="width: 0px;height: 40px;background-color: #A79292;"></div>\</div></td><td style="width: 100px;"><input type="button" value="暂停" style="height: 40px;width: 120px;"></td>'
	tab.appendChild(tr);
	return tr;
}
</script>
</head>
<body style="background-color: beige;" onload="load()">
<div style="text-align: center;">
<div style="text-align: center;">
这是一个使用JsNative编写的下载工具，支持http、ftp
</div>
<br/>
<table style="width: 60%;left: 20%;position: relative;">
<tbody>
<tr><td style="width: 100px;text-align: left;">url:</td><td><input id="url" type="text" style="width: 100%;" value="http://static.qiyi.com/ext/common/QIYImediaV2.5.0.9.exe"></td></tr>
<tr><td style="width: 100px;text-align: left;">save path:</td><td><input id="path" type="text" style="width: 100%;" value="z:\a.exe"></td></tr>
</tbody>
</table>
<input id="down" type="button" value="添加下载任务" style="width: 60%;">
<br/>
<br/>
<table id="downlist" style="width: 60%;height: 60%;position: relative;left: 20%;overflow-y: scroll;">
<caption>Download list</caption>
<tbody></tbody>
</table>
 </div>
</body>
</html>